import React, { useCallback, useEffect, useRef, useState } from 'react';
import { DropDownBox, LoadPanel } from 'devextreme-react';
import List from 'devextreme-react/list';
import { intl } from '@/utils';
import PubSub from 'pubsub-js';

export interface ListData {
    id: string;
    mbmc: string;
}

const data = [
    {
        id: '0',
        mbmc: '账面数'
    },
    {
        id: '1',
        mbmc: '未审数'
    },
    {
        id: '2',
        mbmc: '审定数'
    },
]

const DropDownBoxList = (props: any) => {
    const { widthStyle } = props;
    const Listref = useRef<any>()
    const [selectedYears, setSelectedYears] = useState<any[]>(data);
    const [selectedItemKeys, setSelectedItemKeys] = useState(data.map((item: any) => item.id));


    const onSelectedItemKeysChange = useCallback((e) => {
        // console.log(e, '@@@');
        if (e.name === 'selectedItemKeys') {
            const { value } = e;
            setSelectedItemKeys(value);
        }

        if (e.name === 'selectedItems') {
            const { value } = e;
            setSelectedYears(value);
        }
    }, [setSelectedItemKeys, setSelectedYears]);



    // 取消 事件
    const onSelectionChangedFunc = useCallback((e: any) => {
        const { addedItems, removedItems } = e;
        let v = {};
        let isState = false;
        if (addedItems.length === 1) {
            v = addedItems[0];
            isState = true;
        }
        if (removedItems.length === 1) {
            v = removedItems[0];
            isState = false;
        }
        PubSub.publish('dataGridColumn', { msg: 'changeColumn', data: { v, isState } });



    }, []);

    return (
        <>
            <DropDownBox
                // value={selectedYears}
                height={32}
                width={widthStyle <= 1467 ? 100 : 150}
                // width={150}
                // displayExpr="mbmc"
                // valueExpr="mbmc"
                placeholder={
                    selectedYears?.length ? selectedYears.map((item: any) => item.mbmc).join(',') : intl('audit.yearly.select', '未选择')
                }

            >
                <List
                    ref={Listref}
                    style={{ marginLeft: ' -13px' }}
                    width={200}
                    dataSource={data}
                    selectionMode="multiple"
                    displayExpr="mbmc"
                    keyExpr='id'
                    hoverStateEnabled={true}
                    showSelectionControls={true}
                    onOptionChanged={onSelectedItemKeysChange}
                    selectedItemKeys={selectedItemKeys}
                    onSelectionChanged={onSelectionChangedFunc}
                />
            </DropDownBox>
        </>
    )
}

export default DropDownBoxList;